<template>
	<view class="tips" :class="{isOn:isOn}" @tap="isOn=!isOn">
		<view class="showContent">
			<slot></slot>
		</view>
		<view class="hiddenContent">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name : "auth" ,
		props:{
			
		},
		data() {
			return {
				isOn : false 
			};
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="scss">
.tips{
	display: block;
	width: 100%;
	position: relative;
	cursor: pointer;
	
	.hiddenContent{
		line-height: 23px;
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		white-space: normal;
		text-overflow: auto;
		width: 100%;
		height: 28px;
		opacity: 0;
		word-break: break-all;
	}
	
	.showContent{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	&.isOn{
		.showContent{
			display: none;
		}
		.hiddenContent{
			opacity: 1;
			height: auto;
		}
	}
}
</style>
